////////////////////////////////////////////////////
//实现标签页的转换
///////////////////////////////////////////////////

function initSwitchTab(){
    //1.获取标签元素
    let tabSession=document.querySelector(".tab .tab-session");
    let tabFriend=document.querySelector(".tab .tab-friend");

    //querySelectorAll可以选中多个标签,返回一个数组
    //[0]表示会话列表
    //[1]表示好友列表
    let lists=document.querySelectorAll(".list");

    //2.针对标签按钮，注册点击事件
    tabSession.onclick=function(){
        //1.设置图标
        tabSession.style.backgroundImage="url(img/会话.png)";
        tabFriend.style.backgroundImage="url(img/用户2.png)";

        //2.让会话列表展示，隐藏好友列表
        lists[0].classList="list";
        lists[1].classList="list hide";
    }

    tabFriend.onclick=function(){
        //1.设置图标
        tabSession.style.backgroundImage="url(img/会话2.png)";
        tabFriend.style.backgroundImage="url(img/用户.png)";

        //2.展示好友列表，隐藏会话列表
        lists[0].classList="list hide";
        lists[1].classList="list";
    }
}

initSwitchTab();

////////////////////////////////////////////////////
//操作websocket
///////////////////////////////////////////////////
//let websocket=new WebSocket("ws://127.0.0.1:8080/WebSocketMessage");
let websocket=new WebSocket("ws://"+location.host+"/WebSocketMessage");


websocket.onopen = function(){
    console.log("websocket 连接成功");
}

websocket.onmessage = function(e){
    //TODO 后续实现的重点
    console.log("websocket收到消息："+e.data);
    //e.data是一个json字符串，需转成js对象
    let resp=JSON.parse(e.data);
    if(resp.type=="message"){
        //处理消息响应
        handleMessage(resp);
    }else{
        console.log("resp.type 不符合要求");   
    }
}

websocket.onclose = function(){
    console.log("websocket 连接断开");
}

websocket.onerror = function(){
    console.log("websocket 连接异常");
}

function handleMessage(resp){
    //1.先获取到li标签
    let curSessionLi = findSessionLi(resp.sessionId);
    if(curSessionLi == null){
        curSessionLi = document.createElement("li");
        curSessionLi.setAttribute("message-session-id",resp.sessionId);
        curSessionLi.innerHTML="<h3>"+resp.fromName+"</h3>"
            +"<p></p>";
        //给li标签设置一个点击事件
        curSessionLi.onclick = function(){
            clickSession(curSessionLi);
        }
    }
    //2.把新消息放到li中
    let p =curSessionLi.querySelector("p");
    p.innerHTML = resp.content;
    if(p.innerHTML.length>10){
        p.innerHTML = p.innerHTML.substring(0,10)+"...";
    }
    //3.将收到的消息置顶
    let sessionListUL = document.querySelector("#session-list");
    sessionListUL.insertBefore(curSessionLi,sessionListUL.children[0]);
    //4.将收到的消息放到右侧会话中
    if(curSessionLi.className == "selected"){
        let messageShowDiv = document.querySelector(".right .message-show");
        addMessage(messageShowDiv,resp);
        scrollBottom(messageShowDiv);
    }
}

function findSessionLi(targetSessionId){
    let sessionLis = document.querySelectorAll("#session-list li");
    for(let li of sessionLis){
        let sessionId = li.getAttribute("message-session-id");
        if(sessionId == targetSessionId){
            return li;
        }
    }
    return null;
}

////////////////////////////////////////////////////
//实现消息发送与接收逻辑
///////////////////////////////////////////////////

function initSendButton(){
    let sendButton = document.querySelector(".right .ctrl button");
    let messageInput = document.querySelector(".right .message-input");
    //注册一个点击事件
    sendButton.onclick = function() {
        if(!messageInput.value){
            //判断输入款里面是否有内容
            return;
        }
        let selectedLi = document.querySelector("#session-list .selected");
        //判断有没有选中的会话
        if(selectedLi==null){
            return;
        }
        let sessionId = selectedLi.getAttribute("message-session-id");
        //构造json数据
        let req = {
            type:"message",
            sessionId:sessionId,
            content:messageInput.value
        };
        //接着通过webSocket发送消息
        req=JSON.stringify(req);
        console.log("[websocket] 发送消息："+req);
        websocket.send(req);
        //清空输入框
        messageInput.value="";

    }
}

initSendButton();

////////////////////////////////////////////////////
//判断用户是否登录
///////////////////////////////////////////////////

function getUserInfo(){
    $.ajax({
        type:"get",
        url:"/getUserInfo",
        success:function(body){
            //1.从服务器获取对象
            //2.判断对象是否有效
            if(body != null && body.userId>0){
                //结果有效，把用户名显示到界面上
                let userDiv=document.querySelector(".main .left .user");
                userDiv.innerHTML=body.username;
                //将userId记录到html标签属性中，以备后用
                userDiv.setAttribute("user-id",body.userId);
            }else{
                //无效，跳转到登录页面
                alert("用户未登录");
                location.assign("/login.html");
            }
        }
    });
}
getUserInfo();

////////////////////////////////////////////////////
//获取用户列表
////////////////////////////////////////////////////

function getFriendList(){
    $.ajax({
        type:"get",
        url:"/getFriendList",
        success:function(body){
            //1.首先将先前用户列表的内容删掉
            let friendlistUL=document.querySelector("#friend-list");
            friendlistUL.innerHTML="";
            //2.遍历Body，将服务器响应的结果加到friend-list中
            for(let friend of body){
                //3.创建一个li标签
                let li=document.createElement("li");
                li.innerHTML="<h4>"+friend.friendName+"</h4>";
                //4.将friendId纪录下来，以备后用
                li.setAttribute("friend-id",friend.friendId);
                friendlistUL.appendChild(li);

                //给li加上一个点击事件
                li.onclick=function(){
                    clickFriend(friend);
                }
            }
        },
        error:function(){
            alert("获取用户列表失败");
        }
    });
}
getFriendList();

function getSessionList(){
    $.ajax({
        type:"get",
        url:"/sessionList",
        success:function(body){
            //1.清空之前的会话
            let sessionListUL=document.querySelector("#session-list");
            sessionListUL.innerHTML="";
            for(let session of body){
                //针对lastMessage的长度进行截断处理
                if(session.lastMessage.length>10){
                    session.lastMessage=session.lastMessage.substring(0,10)+"...";
                }
                let li=document.createElement("li");
                //把会话的id存储到li自定义标签中
                li.setAttribute("message-session-id",session.sessionId);
                li.innerHTML="<h3>"+session.friends[0].friendName+"</h3>"
                    +"<p>"+session.lastMessage+"</p>";
                sessionListUL.appendChild(li);

                //给li新增一个点击事件
                li.onclick=function(){
                    clickSession(li);
                }
            }
        }
    });
}

getSessionList();

function clickSession(currentLi){
    //1.设置点击状态
    let allLis=document.querySelectorAll("#session-list>li");
    activeSession(allLis,currentLi);
    //2.获取会话的历史消息
    let sessionId=currentLi.getAttribute("message-session-id");
    getHistoryMessage(sessionId);
}

function activeSession(allLis,currentLi){
    for(let li of allLis){
        if(li==currentLi){
            li.className="selected";
        }else{
            li.className="";
        }
    }
}

//这个函数用来获取指定会话的历史消息
function getHistoryMessage(sessionId){
    console.log("获取历史消息 sessionId="+sessionId);
    //1.先清空右侧列表中已有的内容
    let titleDiv=document.querySelector(".right .title");
    titleDiv.innerHTML="";
    let messageShowDiv=document.querySelector(".right .message-show");
    messageShowDiv.innerHTML="";
    //2.重新设置会话的标题
    let selectedH3=document.querySelector("#session-list .selected>h3");
    if(selectedH3){
        //判断selectedH3有没有
        //比如页面加载时，就没有会话被选中
        titleDiv.innerHTML=selectedH3.innerHTML;
    }
    //3.发送ajax请求，从服务器获取历史消息
    $.ajax({
        type:"get",
        url:"message?sessionId="+sessionId,
        success:function(body){
            //body是一个存储Message对象的数组，一个Message是一条消息
            for(let message of body){
                addMessage(messageShowDiv,message);
            }
            //加个操作：将滚动条滚到最下方，显示最新的消息
            scrollBottom(messageShowDiv);
        }
    });

}

function addMessage(messageShowDiv,message){
    //使用这个div表示一条消息
    let messageDiv=document.createElement("div");
    //判断消息是不是用户自己发的，根据是否来对消息进行靠左靠右排列
    let selfUsername=document.querySelector(".left .user").innerHTML;
    if(selfUsername==message.fromName){
        //自己发的
        messageDiv.className = "message message-right";
    }else{
        //别人发的
        messageDiv.className = "message message-left";
    }
    messageDiv.innerHTML = "<div class='box'>"
        +"<h4>"+message.fromName+"</h4>"
        +"<p>"+message.content+"</p>"
        +"</div>";
    messageShowDiv.appendChild(messageDiv);
}

//此处把messageShowDiv 离得内容滚到底部
function scrollBottom(elem){
    //1.获取可视区域的高度
    let clientHeight=elem.offsetHeight;
    //2.获取内容的总高度
    let scrollHeight=elem.scrollHeight;
    //3.进行滚动操作
    //第一个参数是水平方向滚动的尺寸，第二个参数是垂直方向的滚动
    elem.scrollTo(0,scrollHeight-clientHeight);
}

function clickFriend(friend){
    //1.先判断是否有余当前好友的会话
    let sessionLi = findSessionByName(friend.friendName);
    let sessionListUL=document.querySelector("#session-list");
    if(sessionLi){
        //找到匹配会话，选中会话并置顶该会话并获取历史消息
        //置顶
        sessionListUL.insertBefore(sessionLi,sessionListUL.children[0]);
        //选中并获取会话已经在clickSession中实现了，直接调用即可
        //clickSession(sessionLi);
        //或者模拟实现点击操作
        sessionLi.click();
    }else{
        //未找到匹配会话，创建一个新会话
        sessionLi=document.createElement("li");
        //构造li标签的内容
        sessionLi.innerHTML="<h3>"+friend.friendName+"</h3>"+"<p></p>"
        sessionListUL.insertBefore(sessionLi,sessionListUL.children[0]);
        //模拟点击
        sessionLi.onclick=function(){
            clickSession(sessionLi);
        }
        sessionLi.click();
        // 告诉服务器创建会话
        createSession(friend.friendId,sessionLi);
    }
    //实现标签页切换
    let tabSession = document.querySelector(".tab .tab-session");
    tabSession.click();
}

function findSessionByName(username){
    let sessionLis=document.querySelectorAll("#session-list>li");
    for(let sessionLi of sessionLis){
        let h3=sessionLi.querySelector("h3");
        if(h3.innerHTML==username){
            return sessionLi;
        }
    }
    return null;
}

function createSession(friendId,sessionLi){
    $.ajax({
        type:"post",
        url:"session?toUserId="+friendId,
        success:function(body){
            console.log("创建会话成功！ sessionId="+body.sessionId);
            sessionLi.setAttribute("message-session-id",body.sessionId);
        },
        error:function(){
            console.log("会话创建失败");
            
        }
    });
}
